<template>
  <div class="app-containers">
    <el-row :gutter="20">
      <el-col :span="16">
        <ul>
          <li class="li1">{{models.model.appTitle}}</li>
          <li class="li2">{{models.model.appAbstract }}</li>
          <li class="li3" v-if="models.model.appAuthor !==null">作者：{{models.model.appAuthor}}</li>
          <li class="li4" v-if="models.model.appKeywords !=null">
            关键字：
            <span>{{models.model.appKeywords | formatterWord}}</span>
          </li>
          <li class="li5">
            <span v-if="models.model.updateTime !=null">更新日期：{{models.model.updateTime | date("yyyy-MM-dd")}}</span>
            <span v-else>更新日期：{{models.model.createTime | date("yyyy-MM-dd")}}</span>
            <span v-if="models.model.currentVersion !==null">版本：{{models.model.currentVersion}}</span>
          </li>
          <li class="li6" v-if="models.model.svnUrl !==null">
            <a :href="models.model.svnUrl">仓库地址：{{models.model.svnUrl}}</a>
          </li>
        </ul>
      </el-col>
      <el-col :span="7">
        <div class="download-file">
          <el-divider v-if="showPlugin()">插件</el-divider>
          <div
            v-for="item in controlData.attachmentPlugin"
            :key="item.attachmentId"
            class="plugin-unit"
          >
            <el-link
              type="primary"
              target="_blank"
              :href="getDownloadUrl(item.attachmentId)"
              title="点击下载"
              :underline="false"
            >{{item.fileName}}</el-link>
          </div>
          <el-divider v-if="showExample()">示例</el-divider>
          <div
            v-for="item2 in controlData.attachmentExample"
            :key="item2.attachmentId"
            class="plugin-unit"
          >
            <el-link
              type="primary"
              target="_blank"
              :href="getDownloadUrl(item2.attachmentId)"
              title="点击下载"
              :underline="false"
            >{{item2.fileName}}</el-link>
          </div>
        </div>
      </el-col>
    </el-row>
    <ul>
      <li class="tabs-content">
        <el-tabs v-model="activeName" stretch>
          <el-tab-pane label="概述" name="first">
            <div class="app-introduce">{{models.model.appTitle}}</div>
            <el-divider></el-divider>
            <div v-html="models.model.appDescribe"></div>
          </el-tab-pane>
          <el-tab-pane label="更新记录" name="second">
            <ul v-for="item in query.data" :key="item.versionId" class="app-content">
              <li class="app-version">
                <h3>{{item.version}} ({{item.pubdate | date("yyyy-MM-dd")}})</h3>
              </li>
              <el-divider></el-divider>
              <li class="app-versionDesc" v-html="item.versionDescribe"></li>
            </ul>
            <el-empty v-if="!((query || {}).recordsTotal > 0)" description="暂无数据"></el-empty>
          </el-tab-pane>
          <el-tab-pane label="问答" name="third">
            <app-proble-list :appId="models.model.appId"></app-proble-list>
          </el-tab-pane>
        </el-tabs>
        <vxe-pager
          :current-page="query.startIndex"
          :page-size="query.pageSize"
          :total="query.recordsTotal"
          @page-change="handlePageChange"
          :pageSizes="[5, 10, 20, 50, 100]"
          v-if="activeName=='second'&&(query || {}).recordsTotal > 0"
        ></vxe-pager>
      </li>
    </ul>
  </div>
</template>

<script>
import Controller from "@/libs/framework/controller";
import AppProbleList from "./marketAppProblem/list"
export default class Instance extends Controller {
  onBeforeInit() {
    this.urls = {
      model: "/eip/marketApp/getEntity",
      query: "/eip/marketAppVersion/query"
    };
  }
  onBeforeQuery(type, conditions, params) {
    if (type === "form") {
      params.pageAction = "view";
    }
    if (type === "list") {
      params.query.appId = this.vm.$route.query.appId;
    }
  }

  mixin() {
    return {
      // TODO 临时修改
      name: "eip-marketApp-detail",
      filters: {
        formatterWord(val) {
          if (val !== undefined && val !== null) {
            return val.replace(/,/g, " ").replace(/，/g, " ");
          }
        }
      },
      components: {
        AppProbleList
      },
      data() {
        return {
          activeName: "first"
        };
      },
      methods: {
        handlePageChange({ currentPage, pageSize }) {
          this.query.pageSize = pageSize;
          let params = {
            start: (currentPage - 1) * pageSize,
            length: pageSize
          };
          if (params.start.isNaN) {
            params.stats = 0;
          }
          this.fetchData(params);
        },
        getDownloadUrl(attachmentId) {
          return `${process.env.VUE_APP_BASE_API}/attachment/download?attachmentId=${attachmentId}`;
        },
        showPlugin(){
         if((this.controlData.attachmentPlugin || []).length>0){
          return true
         }
         return false
        },
        showExample(){
          if((this.controlData.attachmentExample || []).length>0){
            return true
          }
          return false
        }
      }
    };
  }
}
</script>

<style scoped lang="scss">
.app-containers {
  background: #ffffff;
  height: 100vh;
  overflow: auto;
}
ul li {
  list-style-type: none;
  padding-top: 10px;
  margin-bottom: 20px;
}
.li1 {
  font-size: 26px;
  color: #595a78;
  margin-bottom: 15px;
}
.li2 {
  color: #424249;
  font-size: 20px;
}
.app-content {
  border: 1px solid #e2e2e2;
  border-radius: 5px;
  padding-left: 15px;
  margin-top: 30px;
  margin-right:40px;
  padding-right: 15px
}
.app-content li{
  padding-top: 0px
}
.li4 span {
  color: #639069;
}
.li5 {
  font-size: 15px;
  display: flex;
  justify-content: flex-start;
}
.li5 span {
  flex: 1;
  color: #8c8c8c
}
.li6 a {
  color: #428bca;
}
::v-deep .el-tabs__nav-scroll {
  width: 50% !important;
  margin: 0 auto !important;
}
.app-introduce {
  font-size: 1.5em;
  padding-top: 0;
  margin-top: 20px
}

.app-version {
  font-size: 1.5em;
}
.app-versionDesc {
  font-size: 16px;
}
.download-file {
  text-align: center;
  margin-top: 30px;
}
.plugin-unit {
  border: 1px solid #cecece;
  width: 100%;
  margin-bottom: 20px;
  height: 30px;
  line-height: 28px;
  border-radius: 5px;
  background: #fff;
  font-size: 16px;
}
::v-deep .el-tabs__nav-wrap::after{
  height: 0;
}
::v-deep .el-tabs__item{
  font-size: 16px;
  font-weight: 700;
  color: #595a78
}
::v-deep .el-icon-arrow-left:before{
  content: none
}
::v-deep .el-icon-arrow-right:before {
    content: none;
}
</style>
